<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ClearPixels | A Free CSS Template by RamblingSoul</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
<div id="header">
<h1 id="sitename"><a href="#"><span class="blue">Clear</span>Pixels</a><span class="caption">A Free CSS Template by RamblingSoul</span></h1>
<div id="nav"><form action="#">
<div id="search"><input type="text" class="keyword" value="Search" />
 </div>
</form>
<div id="topmenu">
<ul>
	<li><a href="index.html">Home</a></li>
    <li class="active"><a href="styles.html">Styles</a></li>
    <li><a href="cart.html">Shopping Cart</a></li>
    <li><a href="notes.html">Notes</a></li>
    <li><a href="#">NoGo</a></li>
    <li><a href="#">NoLink</a></li>


</ul>

</div>
</div>
<div class="clear"></div>
<div id="breadcrumb">RSBlues &raquo; <a href="index.html">Home</a> &raquo; <a href="styles.html"  class="active">Example of CSS Styles</a> &raquo;</div>
</div>
<div id="content">
<div id="right">
   <div class="post">
<h2><a href="#">Block Quotes, Lists &amp; Images</a> <span class="description">Common Styles</span></h2>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ut  tellus aliquet tortor pharetra interdum. Curabitur fermentum nisl nec  tortor. Cras et lorem at lectus placerat vestibulum. Morbi diam. <cite> - Normal Blockquote</cite></p>

</blockquote>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ut  tellus aliquet tortor pharetra interdum. Curabitur fermentum nisl nec  tortor. Cras et lorem at lectus placerat vestibulum. Morbi diam.  Vivamus accumsan tincidunt lectus. Etiam gravida. Quisque at dolor et  felis volutpat convallis. Sed et leo. Curabitur facilisis pede sit amet  sem. Donec vitae sem eu dui aliquet aliquam. In hac habitasse platea  dictumst. </p>
<blockquote class="extract">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ut  tellus aliquet tortor pharetra interdum. Curabitur fermentum nisl nec  tortor. Cras et lorem at lectus placerat vestibulum. Morbi diam.
<cite> - Blockquote with .extract class</cite>
</p>
</blockquote>
<p>Quisque blandit augue sed velit. Nunc mollis pretium orci. Integer  urna erat, cursus et, rutrum in, pulvinar at, diam. Suspendisse  volutpat porta magna. Morbi est. Integer lorem velit, porta adipiscing,  congue sit amet, viverra sit amet, pede. Praesent non lectus. Morbi ac  est. Donec cursus porta mi. Duis euismod ante sed ipsum. Ut congue,  odio vitae tristique vulputate, libero tortor adipiscing magna, sed  suscipit pede ipsum ac eros. Praesent quis magna sit amet arcu auctor  porttitor. Proin pretium pulvinar enim. </p>
<h3>Ordered List</h3>

<ol>
  <li>Nulla eu nunc et.</li>
  <li>velit aliquam accumsan. </li>
  <li>Phasellus dignissim. </li>
  <li>Morbi  quis enim. </li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>Lorem ipsum.</li>
<li> dolor sit amet.</li>
<li> consectetuer adipiscing elit. </li>
<li>Donec vitae metus.</li>
</ul>

<h3>Image In A Post - .leftalign</h3>
<img src="images/ad-rs.jpg" alt="Ad RS" width="150" height="90" class="leftalign" />
<p>Maecenas luctus. Cras sed orci ut libero posuere elementum. Curabitur  tincidunt blandit nulla. Nunc cursus, lorem id volutpat scelerisque,  ligula lacus aliquet nisl, ac vestibulum sem nisl at nulla. Quisque  euismod sapien. Cras in dolor. Aliquam erat volutpat. Quisque vitae  lectus. Nam lorem. Quisque feugiat nisl. Integer adipiscing purus  adipiscing velit. Phasellus lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur blandit adipiscing nisl. Nam convallis venenatis nisl. Mauris dictum est at ligula. Aenean ultricies augue eu nulla. Vestibulum ultricies est ac metus rhoncus tempus. Suspendisse potenti. Integer arcu purus, aliquam in, suscipit eu, sollicitudin in, odio. Donec congue arcu imperdiet ligula. </p>
<h3>Image In A Post - .rightalign</h3>
<img src="images/ad-rs.jpg" alt="Ad RS" width="150" height="90" class="rightalign" />
<p>Maecenas luctus. Cras sed orci ut libero posuere elementum. Curabitur  tincidunt blandit nulla. Nunc cursus, lorem id volutpat scelerisque,  ligula lacus aliquet nisl, ac vestibulum sem nisl at nulla. Quisque  euismod sapien. Cras in dolor. Aliquam erat volutpat. Quisque vitae  lectus. Nam lorem. Quisque feugiat nisl. Integer adipiscing purus  adipiscing velit. Phasellus lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur blandit adipiscing nisl. Nam convallis venenatis nisl. Mauris dictum est at ligula. Aenean ultricies augue eu nulla. Vestibulum ultricies est ac metus rhoncus tempus. Suspendisse potenti. Integer arcu purus, aliquam in, suscipit eu, sollicitudin in, odio. Donec congue arcu imperdiet ligula. </p>
<div class="postbottom">
<ul>
<li class="permalink"><a href="#">Read More</a></li>
<li class="cats"><a href="#">Category</a></li>
<li class="auth"><a href="#">Author</a></li>
<li class="date"><a href="#">18 May 2008 12:50 PM</a></li>
<li class="comnts"><a href="#">Comments</a></li>
</ul>
</div>
   </div>
   <div class="post">
<h2><a href="#">Tables &amp; Forms</a></h2>
<h3>Table Example</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ut  tellus aliquet tortor pharetra interdum. Curabitur fermentum nisl nec  tortor. Cras et lorem at lectus placerat vestibulum. Morbi diam.  </p>


<table cellspacing="0" cellpadding="0">
    <tr>
      <th scope="col">Lorem</th>
      <th scope="col">Ipsum</th>
      <th scope="col">Dolor</th>
    </tr>

    <tr>
      <td>Sit</td>
      <td>Ipsum</td>
      <td>Consectetuer</td>
    </tr>
    <tr>
      <td>Adipiscing elit</td>

      <td>Aliquam Negue mi</td>
      <td>Euismond vitae</td>
    </tr>
    <tr>
      <td>Morbi elit nulla</td>
      <td>Laoreet Vel</td>
      <td>Posuere et</td>

    </tr>
    <tr>
      <td>Sit</td>
      <td>Ipsum</td>
      <td>Consectetuer</td>
    </tr>
    <tr>

      <td>Adipiscing elit</td>
      <td>Aliquam Negue mi</td>
      <td>Euismond vitae</td>
    </tr>
    <tr>
      <td>Morbi elit nulla</td>
      <td>Laoreet Vel</td>

      <td>Posuere et</td>
    </tr>
  </table>
<h3>Form Example</h3>
<p>Vivamus accumsan tincidunt lectus. Etiam gravida. Quisque at dolor et  felis volutpat convallis. Sed et leo. Curabitur facilisis pede sit amet  sem. Donec vitae sem eu dui aliquet aliquam. In hac habitasse platea  dictumst. </p>
<form action="#">
<div class="contactform">

<label for="name">Name:</label>
<input class="textfield" name="Nname" id="name" type="text" />
<label for="email">email:</label><input class="textfield" id="email" name="email" type="text" />
<label for="Age">age:</label>
<input class="textfield" name="Age" id="Age" type="text" />
<label for="Comments">Comments/Questions:</label>
<textarea class="textfield" id="Comments" name="Comments" cols="30" rows="8"></textarea>
<label for="Submit"><span class="hide">Submit</span></label>
<input name="Submit" type="button" id="Submit" class="button" value="Submit" />
</div>
</form>

</div>

<div class="pagenavi">
<span class="alignright"><a href="#">Newer Posts</a> &raquo;</span>

<span class="alignleft">&laquo; <a href="#">Older Posts</a></span></div>
    </div>
    
    <div id="sidebar">
    <div id="sidebartop"></div>
    <h2>Sidebar</h2>
    <ul>
      <li class="active"><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Dolor Sit Amet</a></li>
      <li><a href="#">Consectetuer</a></li>
      <li><a href="#">Adipiscing Elit</a></li>
      <li><a href="#">Sed Dictum</a></li>
      <li><a href="#">Nunc Quis Elit</a></li>

    </ul>
 <h2>Links</h2>
    <ul>
      <li><a href="http://ramblingsoul.com">RamblingSoul</a></li>
      <li><a href="http://cssfreebies.com">CSSFreebies</a></li>
      <li><a href="http://opendesigns.org">OpenDesigns</a></li>

    </ul>
    <div id="sidebarbtm"></div>
</div>
<div class="clear"></div>
<div id="bottom">
<p>Copyright &copy; 2008 YourSiteName</p>
<p><a href="#">You</a> | <a href="#">Can</a> | <a href="#">Put</a> | <a href="#">Some</a> | <a href="#">Links</a> | <a href="#">Here</a></p>
</div>
</div>

<div id="footer">
<div id="credits">
<a href="http://ramblingsoul.com">CSS Template</a> by RamblingSoul</div>

</div>
</div>

</body>
</html>
